import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { Swiper, SwiperItem, View, Text, Image } from "@tarojs/components";
import "./index.less";
import Slider from "../../components/slider/slider.tsx";
import { infoStore } from "src/store/info.ts";
import { observer } from "mobx-react";
import { AtModal } from "taro-ui";

export default observer(function Home() {
  const [location, setLocation] = useState("");
  const { userInfo } = infoStore;
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    Taro.getLocation({
      success: (res) => {
        const { province, city } = res;
        let str = "";
        if (province) {
          str += province;
        }
        if (city) {
          str += city;
        }
        if (!str) {
          str = "暂无位置信息";
        }
        setLocation(str);
      },
      fail: () => setLocation("暂无位置信息"),
    });
  }, []);

  // useDidShow(() => {
  //   Taro.showModal({
  //     content: '获取微信信息后才会展示用户信息哦',
  //     success: () => {
  //       Taro.getUserProfile({
  //         desc: '您的信息将被小程序用于展示',
  //         success: (res) => {
  //           const { userInfo: { nickName, avatarUrl } } = res;
  //           setInfo({ nickName, avatarUrl })
  //         },
  //       });
  //     }
  //   })
  // }
  // )

  // useEffect(() => {
  //   Taro.getStorage({key: 'userInfo'}).then((res) => {
  //     if (res) {
  //       setInfo(res.data);
  //     }
  //   }).catch((err) => console.log(err))
  // }, [])

  useEffect(() => {
    setShowModal(!userInfo?.nickName);
  }, [userInfo]);

  const gotoTabBar = (page: string) => {
    const url = `/pages/${page}/index`
    if (Taro.getEnv() === "WEAPP") {
      Taro.switchTab({ url });
    } else {
      Taro.navigateTo({ url });
    }
  }

  return (
    <View className="home">
      <AtModal
        isOpened={showModal}
        title="提示"
        confirmText="确认"
        onConfirm={() => gotoTabBar('mine')}
        content="您还没有登录，请先登录"
      />
      <View className="brand">
        <View>
          <View className="bg-text">小程序会员专享</View>
          <View className="large-text">天天会员日</View>
          <Swiper
            className="ad-swiper"
            indicatorColor="#999"
            indicatorActiveColor="#333"
            indicatorDots
            vertical={false}
            circular
            autoplay
          >
            <SwiperItem>
              <View className="ad-text-1">今天星期一，做个APP</View>
            </SwiperItem>
            <SwiperItem>
              <View className="ad-text-2">今天星期二，做个小程序</View>
            </SwiperItem>
            <SwiperItem>
              <View className="ad-text-3">今天星期三，做个H5</View>
            </SwiperItem>
          </Swiper>
        </View>
        <View
          style={{
            backgroundColor: "#fff",
            margin: "10px",
            padding: "10px",
            borderRadius: 4,
          }}
        >
          <View className="info">
            <View className="user">
              {userInfo?.avatar && (
                <Image className="avatar" src={userInfo.avatar} />
              )}
              <Text style="margin-left: 8px">
                {userInfo?.nickName ? userInfo.nickName : "Oh,没有信息"}
              </Text>
            </View>
            <View>
              <Text>{location}</Text>
            </View>
          </View>
          <View className="white-div" onClick={() => gotoTabBar('meal')}>
            <View
              style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                flexDirection: "column",
              }}
            >
              <Text style={{ fontSize: 22, fontWeight: 500, display: "block" }}>
                门店自取
              </Text>
              <Text style={{ color: "#c5c6c5" }}>茶友里面请</Text>
            </View>
            <Slider style={{ height: 34 }} />
            <View
              style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                flexDirection: "column",
              }}
            >
              <Text style={{ fontSize: 22, fontWeight: 500, display: "block" }}>
                外卖点单
              </Text>
              <Text style={{ color: "#c5c6c5" }}>奉茶到家</Text>
            </View>
          </View>
          <View
            style={{
              paddingTop: 16,
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <Text style={{ fontWeight: 500 }}>热量计算器</Text>
            <Text style={{ color: "#c5c6c5" }}>一键查询热量</Text>
          </View>
        </View>
      </View>
    </View>
  );
});
